<template>
  <div class="chinamap">
    <e-charts :option="option" autoresize></e-charts>
  </div>
</template>

<script>
import ECharts from 'vue-echarts'
import { use, registerMap } from 'echarts/core'
import axios from 'axios'

import { CanvasRenderer } from 'echarts/renderers'
import { MapChart, EffectScatterChart } from 'echarts/charts'

import {
  TitleComponent,
  TooltipComponent,
  GeoComponent
} from 'echarts/components'

use([
  TitleComponent,
  TooltipComponent,
  GeoComponent,
  MapChart,
  EffectScatterChart,
  CanvasRenderer
])
export default {
  components: {
    ECharts
  },
  data () {
    return {
      path: '/china.json',
      option: {}
    }
  },
  methods: {
  },
  mounted () {
    axios.get(this.path).then((res) => {
      const mapData = res.data
      registerMap('china', mapData)

      this.option = {
        title: {
          text: '就业城市',
          left: 'center',
          textStyle: {
            color: '#fff',
            fontSize: 35
          },
          top: '5%'
        },
        geo: {
          map: 'china',
          silent: true,
          zoom: 1.2,
          label: {
            normal: {
              show: false,
              textStyle: {
                color: '#fff'
              }
            }
          },
          itemStyle: {
            borderColor: '#7041ff',
            borderWidth: '2',
            areaColor: '#161e29'
          }
        },
        tooltip: {
          trigger: 'item',
          alwaysShowContent: true,
          enterable: true,
          formatter: (p) => {
            console.log(p)
            let val = p.value
            if (window.isNaN(val)) {
              val = 0
            }
            const txtCon = "<div style='text-align:center'>" + p.name
            return txtCon
          }
        },

        series: [
          {
            name: '就业地区',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            map: 'china',
            label: {
              show: true,
              color: '#fff',
              fontSize: 13,
              formatter: function (params) {
                return (params.data.name)
              }
            },
            itemStyle: {
              color: '#f4e925',
              shadowBlur: 10,
              shadowColor: '#333'
            },
            // TODO： 所需数据格式
            data: [
              { name: '重庆', value: [106.45000, 29.56667], per: 9021 },
              { name: '贵阳', value: [106.71667, 26.56667], per: 54 },
              { name: '上海', value: [121.472644, 31.231706], per: 217 },
              { name: '北京', value: [116.41667, 39.91667], per: 54 },
              { name: '深圳', value: [114.06667, 22.61667], per: 54 },
              { name: '杭州', value: [120.20000, 30.26667], per: 163 },
              { name: '郑州', value: [113.65000, 34.76667], per: 108 },
              { name: '成都', value: [104.06667, 30.66667], per: 217 },
              { name: '乌鲁木齐', value: [87.68333, 43.76667], per: 54 },
              { name: '武汉', value: [114.31667, 30.51667], per: 54 }
            ]
          }
        ]
      }
    })
  }
}
</script>

<style scoped>
.chinamap {
    width: 100%;
    height: 100vh;
}
</style>
